<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="()=>{}" :header-right="headerRight"></xcl-header>
<div class="content">
	<div class="list-block" v-show="$route.params.step=='step3'">
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">设置密码</div>
	            <div class="item-input">
	              <input type="password" placeholder="6-20位字母、数字或符号的组合" maxlength="20" v-model="user.password">
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">确认密码</div>
	            <div class="item-input">
	              <input type="password" placeholder="6-20位字母、数字或符号的组合" maxlength="20" v-model="user.repeatPassword">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>

	<div class="list-block" v-show="$route.params.step=='step1'">
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title" style="width:100%">密保问题：{{user.question}}</div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-input">
	              <input type="text" placeholder= '请输入答案' maxlength="20" v-model="user.answer">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>

	<div class="list-block" v-show="$route.params.step=='step2'">
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title" style="width:100%">需要您的身份证号以核对身份</div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-input">
	              <input type="text" placeholder= '请输入答案' maxlength="20" v-model="user.idNumber">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>

	<div class="content-block">
		<button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="signUp">{{btnText}}</button>
	</div>	
</div>
<xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>

  </div>
</template>
<script>
	import xclHeader from '../components/header.vue'
	import {getCheck,ERROR_DEFINE,QUESTIONS}  from '../libs/utils'
	import xclToast from '../components/xclToast.vue'

	let UserProxy =  require("../proxy/user_proxy");
	let User = new UserProxy();
	export default {
		data(){
			return{
				pageTitle:'重置密码',
				headerRight:'',
				btnText:'下一步',
				callBack:()=>{},
				softCode:SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1)),
				header:{
					show:true
				},
                user:{
                	password:'',
                	repeatPassword:'',
                	question:'',
                	answer:'',
                	idNumber:'',
                	randNum:0,
                	questionIndex:0
                },
                toast:{
                	show:false,
                	content:''
                }
			}
		},
		computed:{
			forbidenLogin(){
				var step = this.$route.params.step;
				switch(step){
					case 'step2':
						return !!!this.user.idNumber;
					case 'step1':
						return !!!this.user.answer;
					case 'step3':
						return !(getCheck.checkPassword(this.user.password) && this.user.password == this.user.repeatPassword);
				}
			},
		},
		ready(){
			var _this = this;
			User.isRegisterFinish(localStorage.token,(d)=>{
				if (d.code == 200 && d.results){
					var getcode = d.results[0];
					var gostep = 'step1';
					if(getcode&32){
						gostep='step1';
						User.getQuestionIndexs(localStorage.token,(d1)=>{
							if(d1.code == 200 && d1.results[0]&& d1.results[1]&& d1.results[2]){
								let randNum=Math.ceil(Math.random()*2);
								_this.user.questionIndex = d1.results[randNum]; 
								_this.user.question = QUESTIONS[d1.results[randNum]];
								_this.user.randNum = randNum;
							}
						});
					}else if(getcode&4){
						gostep='step2';
					}else{
						gostep='step3';
						_this.btnText='确定';
					}
					_this.$router.go('/ResetPassword/'+gostep);
				}
			});
		},
		methods:{
			signUp(){
				let _this = this;
				let step  = this.$route.params.step;
				if(this.forbidenLogin)return false;
				if(step=='step1'){
					this.step1();
				}else if(step=='step2'){
					this.step2();
				}else if(step=='step3'){
					this.step3();
				}

			},
			refreshCode(){
				this.softCode=SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1));
			},
			showToast(text){
				this.toast={show:true,content:text};
				setTimeout(()=>{this.toast.show =  false},2800);
			},
			step1(){
				var _this = this ;
				User.validateAnswer(localStorage.token,_this.user.randNum+1,_this.user.questionIndex,_this.user.answer,(d)=>{
					if(d.code ==200 && d.results &&d.results[0].result){
							localStorage.pageToken = d.results[0].pageToken;
							localStorage.time = d.results[0].time;
							_this.$router.go('/ResetPassword/step3');
					}else{
						_this.toast = {show:true,content:'问题验证失败'};
                        setTimeout(()=>{
                        	_this.toast.show = false;
                        },2800);
					}
				});
			},
			step2(){
				var _this = this ;
				User.validateIDNumber(localStorage.token,_this.user.idNumber,(d)=>{
					if(d.code ==200 && d.results &&d.results[0].result){
							localStorage.pageToken = d.results[0].pageToken;
							localStorage.time = d.results[0].time;
							_this.$router.go('/ResetPassword/step3');
					}else{
						_this.toast = {show:true,content:'身份证验证失败'};
                        setTimeout(()=>{
                        	_this.toast.show = false;
                        },2800);
					}
				});
			},
			step3(){
				var _this = this ;
				User.modifyPassword(localStorage.token,localStorage.smsCode,_this.user.password,localStorage.time,localStorage.pageToken,(d)=>{
					if(d.code == 200){
						_this.forbidenLogin = true;
						_this.pageTitle = '密码修改成功';
						localStorage.removeItem('token');
						_this.toast = {show:true,content:'密码修改成功'};
                        setTimeout(()=>{
                        	_this.toast.show = false;
                        	_this.$router.go('/Login');
                        },2800);
					}else{
						_this.showToast(ERROR_DEFINE[d.code]);
					}
				});
			}
		},
		components:{
           "xclHeader":xclHeader,  
           'xclToast':xclToast              
        }
	}
</script>
<style  lang="stylus">
	.text-right
		text-align right
	.btn-style
		height 2rem
		font-size .85rem
		line-height 2rem !important
		width:100%
	.mute
		color #ddd	
	.f12
		font-size .8em	
</style>	
